<template>
  <div class="customer common__color-F0F0F0">
    <x-header v-show="!isWeChar">
      <div slot="default" class="common__header--title">我的好友</div>
      <div @click="goBack" slot="overwrite-left" class="common__header--img"><img slot="icon" src="~assets/x3/ico/goback1.png" class="go-back"></div>
      <!-- <div class="common__header--rightfont" slot="right">标签</div> -->
    </x-header>
    <group class="common__serch--group frinends-input">
      <input @keyup="queryData" v-model="serchData" class="common__serch--input" placeholder="搜索">
    </group>
    <!-- <group>
      <cell>
        <span class="friends__list--title" slot="after-title">邀请好友</span>
        <img slot="icon" width="20" style="display:block;margin-right:5px;" src="~assets/x3/ico/shop-header.png">
      </cell>
      <cell>
        <span class="friends__list--title" slot="after-title">分组管理</span>
        <img slot="icon" width="20" style="display:block;margin-right:5px;" src="~assets/x3/ico/shop-header.png">
      </cell>
      <cell>
        <span class="friends__list--title" slot="after-title">好友列表</span>
        <img slot="icon" width="20" style="display:block;margin-right:5px;" src="~assets/x3/ico/shop-header.png">
      </cell>
    </group> -->
    <group>
      <tab>
        <tab-item @click.native="setFindType('',0)" selected>字母</tab-item>
        <tab-item @click.native="setFindType('resDate',1)">注册
          <img class="font-up" v-show="typeSort[1]=='asc'" src="~assets/x3/ico/up.png">
          <img class="font-down" style="width: 20px;" v-show="typeSort[1]!='asc'" src="~assets/x3/ico/down.png">
        </tab-item>
        <tab-item @click.native="setFindType('orderCount',2)">出单
          <img class="font-up" v-show="typeSort[2]=='asc'" src="~assets/x3/ico/up.png">
          <img class="font-down" style="width: 20px;" v-show="typeSort[2]!='asc'" src="~assets/x3/ico/down.png">
        </tab-item>
        <tab-item @click.native="setFindType('orderAmout',3)">保费
          <img class="font-up" v-show="typeSort[3]=='asc'" src="~assets/x3/ico/up.png">
          <img class="font-down" style="width: 20px;" v-show="typeSort[3]!='asc'" src="~assets/x3/ico/down.png">
        </tab-item>
      </tab>
    </group>
    <group>
      <div class="template-border-top" v-for="(data,index) in showData" :title="data.userName" :key="index">
        <cell :title="data.userName" is-link :border-intent="false" :arrow-direction="showData[index].showDetail ? 'up' : 'down'" @click.native="showData[index].showDetail = !showData[index].showDetail">
          <img slot="icon" width="20" style="display:block;margin-right:5px;" :src="data.headUrl">
          <div slot="default" style="font-size: 15px;color: #C8161D;">{{data.showMsg}}&nbsp&nbsp</div>
        </cell>
        <template v-if="showData[index].showDetail">
          <div class="template-detail">
            <div>
              <div class="template-detail-left">
                <span class="template-detail-font">保单</span> : {{data.orderCount}}</div>
              <div>
                <span class="template-detail-font">保费</span> : {{data.orderAmout}}</div>
            </div>
            <div>
              <span>
                <span class="template-detail-font">注册时间</span> : {{data.resDate}}</span>
            </div>
          </div>
        </template>
      </div>

    </group>
    <keep-alive v-show="type==''">
      <pin-yin v-show="type==''"></pin-yin>
    </keep-alive>
  </div>
</template>
<script>
import { RouteUrl, Mutations, FooterShow, PopState, Url_Key } from "src/common/const";
import PinYin from 'src/components/my/PinYinList';
import { XHeader, Search, Cell, CellBox, CellFormPreview, Group, XTable, Tab, TabItem } from 'vux';
import { mapState, mapActions } from "vuex";
export default {
  components: { XHeader, Search, Group, Cell, CellFormPreview, CellBox, XTable, Tab, TabItem, PinYin },
  computed: mapState({
    isWeChar: "isWeChar",
    user: "user",
    channel: "channel"
  }),
  data() {
    return {
      results: [],
      value: 'test',
      sort: "asc",
      type: "",
      showData: [],
      typeSort: ['asc', 'asc', 'asc', 'asc'],
      serchData: "",
      index: 0,
    }
  },
  watch: {
    'channel.showData': {
      handler(cur, old) {
        this.showData = this.channel.showData;
        // this.useNatureList = CarConfig.getCarKind(this.car.carInfoList[this.car.licenseNo].tprptCarOwnerDto.natureOfRole, this.tprpTitemCarDto.carKindCode);
        // if (!cur) {
        //     this.setQueryInfo();
        // }
      }
    },
  },
  methods: {
    setFindType(type, index) {
      this.index = index;
      this.type = type;
      if (this.typeSort[index] == "asc") {
        this.typeSort[index] = "desc";
      } else {
        this.typeSort[index] = "asc";
      }
      this.queryData();
    },
    queryData() {
      let userCode = "";
      if (this.user.isLogin) {
        userCode = this.user.userDto.userCode;
      }
      let queryData = {
        type: this.type,
        sort: this.typeSort[this.index],
        _this: this,
        userCode: userCode,
        serch: this.serchData
      }
      this.$common.storeCommit(this, Mutations.GET_FIND_ALL_FRIEND, queryData);
    },
    goBack() {
      this.$common.goBack(this);
    }
  },
  mounted() {
    document.title = "我的好友";
    let _this = this;
    this.$init.subPageInit(this);
    this.setFindType('');
  },
}
</script>


<style lang="scss">
.frinends-input {
  input::-ms-input-placeholder {
    text-align: center;
  }

  input::-webkit-input-placeholder {
    text-align: center;
  }
}

.friends__list--title {
  font-size: 14px;
}

.font-up {
  width: 20px;
  margin-bottom: -8px;
}
.font-down {
  width: 20px;
}
</style>



